import React, {useEffect, useState } from 'react'
import { Avatar, Card, Empty, message } from 'antd'
import styles from './index.module.scss'
import { DeleteOutlined, EllipsisOutlined, HeartOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
import CardModal from './CardModal'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
import { delCheckpublicApi, deletePublic, getAllContent, getCollection, getContent, getLiked,getOtherPublicApi,getSearch } from '@/common/api'
import emptyImg from '@/assets/home/empty.png'
import Masonry from 'react-masonry-css'
const breakpointColumnsObj = {
  default: 5,
  1200: 4,
  800: 2,
  500: 1
};
export default function CardList(props) {
  const {  isUser,comefrom,params } =props
  const [modalOpen, setModalOpen] = useState(false);
  const [publicId,setId] = useState('')
  const [authorInfo,setAuthorInfo] = useState({})
  const sendApi = ()=>{
    switch (comefrom) {
      case 'like':
        return getLiked
      case 'favorite':
        return getCollection
      case 'home':
        return getAllContent
      case 'markDown':
        return getContent
      case 'search':
        return getSearch
      case 'otherDetail':
        return getOtherPublicApi
      default:
      return getAllContent;
    }
  }
  const {list,setList,endRef}=UsePaginatedHook(sendApi(),15,params)
  const openModal = (val, userInfo) => {
    if (userInfo) {
       setAuthorInfo(userInfo)
    }
    setId(val?.publicId); 
    if (val.state === "1") {
      message.info("作品正在审核！")
      return
    }
    if (val.state === "2") {
      message.info("作品审核未通过！")
      return
    }
    setModalOpen(true);
  }
  //删除作品
  const deleteWork = async (val) => {
        const RES = await delCheckpublicApi({_id:val._id })
        if (RES.code === 200) {
          message.success(RES.msg)
          setList(pre => {
            const newList = pre.filter(item => item._id !== val._id)
            return newList
          })
        }
  }
  const cardList = () => {
    if (isUser) {
      return (
        <Masonry
          breakpointCols={breakpointColumnsObj}
          className="my-masonry-grid"
          columnClassName="my-masonry-grid_column"
        >
        {
          list?.map((val,index) => {
            return <Card
              ref={list.length===index+1?endRef:null}
              key={val?._id}
              
              hoverable
              cover={<img onClick={() =>openModal(val,false)} alt="example" src={`http://localhost:5000/${val?.imgList[0]}`} />}
            >
              <div className={styles.public}>
                {val.state==="2"&&<p style={{color:"red",justifyContent:"space-between"}}>作品审核未通过！<DeleteOutlined onClick={()=>deleteWork(val)} style={{cursor:"pointer"}} /></p>}
                <p>{val?.title}</p>
                <div className={styles.Info}>
                  <div style={{ display: "flex"}}>
                    <HeartOutlined style={{ marginRight: "5px" }} />
                    <span>{val?.likeNumber}</span>
                  </div>
                </div>
                { Boolean(val.state === "3")&&val.area === 0 && <div className='lock'><LockOutlined />私密</div>}
                {val.state === "1" && <div className='lock'><LockOutlined />审核中</div>}
              </div>
            </Card>
          })
        }
      </Masonry>
      )
    }
    return (
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {
          list?.map(({ public: val, userInfo },index) => {
            return <Card
              ref={list.length===index+1?endRef:null}
              key={val?._id}
              hoverable
              cover={<img onClick={() =>openModal(val,userInfo)} alt="example" src={`http://localhost:5000/${val?.imgList[0]}`} />}
            >
              <div className={styles.public}>
                <p>{val?.title}</p>
                <div className={styles.Info}>
                  <div className="user">
                    {userInfo?.avator?<Avatar src={`http://localhost:5000/${userInfo?.avator}`}/>:<Avatar  icon={<UserOutlined />}/>}
                    <span style={{marginLeft:"20px"}}>{userInfo?.name}</span>
                  </div>
                  <div>
                    <HeartOutlined style={{ marginRight: "5px" }} />
                    <span>{val?.likeNumber}</span>
                  </div>
                </div>
              </div>
            </Card>
          })
        }
      </Masonry>
    )
  }
  if (list.length == 0) {
  return <Empty style={{margin:"100px"}} description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
  return (
    <>
      {list.length!==0&&<div className={styles.MarkDown}>
        {
          cardList()
        }
      </div>
      }
      {
       modalOpen&& <CardModal pubLicist={list} setPublicList={setList} isUser={isUser} authorInfo={authorInfo} modalOpen={modalOpen} publicId={publicId} setModalOpen={()=>setModalOpen(false)} />
      }
    </>
  )
}
